<template>
	<div class="newsList">
		<div class="list_content">
			<a class="block_a" :href="Path + item?.url" target="_blank" v-for="item in contentPage.records">
				<div class="list">
					<div class="list_img_content" v-if="item.headImag">
						<img class="list_img" :src="getImgPath(item.headImag)" />
					</div>
					<div class="list_right">
						<p class="list_title" v-html="brightenKeyword(item.title, word)"></p>

						<div class="descripteAndDate">
							<span class="list_sidt">{{ item.siteName }}</span>
							<span class="list_descript" v-if='item.contentSourceName'>{{ item.contentSourceName }}</span>
							<span class="list_date">{{ item.publishTime }}</span>
						</div>
						<div class="comment_zan_store">
							<span class="see span">
								<i class="iconfont icon-Eyes"></i>
								<span class="comment_zan_store_number">{{ setNumber(item.views || 0) }}</span>
							</span>
							<span class="zan span">
								<i class="iconfont icon-a-Thumbs-up1"></i>
								<span class="comment_zan_store_number">{{ setNumber(item.likes || 0) }}</span>
							</span>
							<span class="store span">
								<i class="iconfont icon-a-Star1"></i>
								<span class="comment_zan_store_number">{{ setNumber(item.favorites) }}</span>
							</span>
							<!-- <span class='comment span'>
							<i class='iconfont icon-Comment'></i>
							<span class='comment_zan_store_number'>{{setNumber(1100)}}</span>
						</span> -->
						</div>
					</div>
				</div>
			</a>
			
			<div class='tabsBtmLeft' v-if='!contentPage?.records?.length'>
				<img class='suolue' src="https://demo.jeecms.com/u/cms/www/2023/07/20/1681874751783559170.png">
				<p>抱歉，在本站未找到“{{word}}”结果，换个词试试吧～</p>
			</div>
		</div>
		<el-pagination
			background
			layout="prev, pager, next"
			:current-page="current"
			@current-change="handleCurrentChange"
			:page-size="contentPage.size"
			:total="contentPage.total"
			prev-text="上一页"
			next-text="下一页"
			v-if='contentPage.total'
		></el-pagination>
	</div>
</template>

<script>
export default {
	props: ['contentPage', 'word'],
	data() {
		return {
			src: '../img/bg.jpg',
			newsListData: [],
			current: 1,
			Path:getRootPath(),
		};
	},
	created() {},
	methods: {
		setNumber(val) {
			let value = val;
			if (value >= 1000) {
				value = value / 1000 + 'K';
			} else if (value >= 10000) {
				value = value / 1000 + 'W';
			}
			return value;
		},
		brightenKeyword(val, keyword) {
			const Reg = new RegExp(keyword, 'i');
			let res = '';
			if (val) {
				res = val.replace(Reg, `<span style="color: red;">${keyword}</span>`);
				return res;
			}
		},
		handleCurrentChange(val) {
			this.current = val;
			this.$emit('search', val);
		},
		getImgPath(url){
			return imgPath(url);
		},
	}
};
</script>

<style scoped="scoped">
.newsList {
  margin-top: 40px;
  width: 100%;
}
.newsList .list {
  display: flex;
  width: 100%;
  margin-bottom: 40px;
}
.newsList .list .list_img_content {
  margin-right: 24px;
  width: 208px;
  height: 117px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.newsList .list .list_img_content .list_img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.newsList .list .list_img_content .list_img:hover {
  transform: scale(1.05);
}
.newsList .list .list_right {
  width: 608px;
}
.newsList .list .list_right .list_title {
  box-sizing: border-box;
  height: 28px;
  font-size: 20px;
  font-weight: 500;
  width: -webkit-fit-content;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.newsList .list .list_right .list_title:hover {
  border-bottom: 1px solid #333333;
}
.newsList .list .list_right .descripteAndDate {
  margin-top: 16px;
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 14px;
}
.newsList .list .list_right .descripteAndDate .list_descript,
.newsList .list .list_right .descripteAndDate .list_date {
  margin-left: 24px;
}
.newsList .list .list_right .comment_zan_store {
  margin-top: 43px;
}
.newsList .list .list_right .comment_zan_store .span {
  margin-right: 16px;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 14px;
}
.newsList .list .list_right .comment_zan_store .span .comment_zan_store_number {
  margin-left: 4px;
}


.newsList .list_content .tabsBtmLeft {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		align-items: center;
}
.newsList .list_content .tabsBtmLeft .suolue{
	margin-top:160px;
	width: 253px;
	height: auto;
	margin-bottom: 24px;
}

</style>
<style>
	.newsList .el-pagination.is-background .btn-next.is-active,
	.newsList .el-pagination.is-background .btn-prev.is-active,
	.newsList .el-pagination.is-background .el-pager li.is-active {
	  background-color: #ff3333;
	  color: var(--el-color-white);
	}
	
</style>
